<template>
  <div class="emergency_box">
    <div class="emergency_top">
      <div class="emergency_title">设备状态统计</div>
    </div>

    <div v-if="JSON.stringify(mapData) !='[]'" class="echarts_container">
      <div id="map4" class="col-md-12  col-sm-12 col-xs-12" style="height: 100%;" />
    </div>
    <div v-else class="echarts_noData">
      <svg-icon icon-class="暂无数据" />
    </div>
  </div>
</template>

<script>
import { cncStatus } from '@/api/system/largeScreen'
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'windowResizeTag'
    ])
  },
  watch: {
    windowResizeTag() {
      if (this.myChart || this.vertical) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.drawLine()
          }, 500)
        })
      }
    }
  },
  data() {
    return {
      mapData: [],
      myChart: undefined,
      timer: undefined
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('map4'))
    this.getCncStatus()
  },
  methods: {
    getCncStatus() {
      cncStatus({ companyId: this.$store.state.user.companyId }).then(res => {
        res.data.forEach(ele => {
          if (ele.name == '运行') {
            ele['color'] = '#4DEE9D'
          } else if (ele.name == '报警') {
            ele['color'] = '#FF9292'
          } else if (ele.name == '空闲') {
            ele['color'] = '#FFCA74'
          } else if (ele.name == '急停') {
            ele['color'] = '#FF2E2E'
          } else {
            ele['color'] = '#999999'
          }
        })
        const data = res.data.filter(item => Number(item.value) != 0)
        this.mapData = data
        this.$nextTick(() => {
          this.drawLine()
        })
      })
    },
    drawLine() {
      this.myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        // 右边信息面板
        legend: {
          orient: 'vertical',
          right: '20%',
          top: 'middle',
          itemHeight: 14,
          itemWidth: 27,
          itemGap: 30,
          textStyle: {
            color: '#000000',
            fontSize: 16,
            padding: [0, 20]
          }
        },
        color: this.mapData.map(item => item.color),
        series: [
          {
            name: '设备状态统计',
            type: 'pie',
            radius: ['44%', '70%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: true,
            labelLine: {
              normal: {
                length: 20,
                length2: 80,
                lineStyle: {
                  color: '#D8D8D8'
                }
              }
            },
            itemStyle: {
              borderRadius: 6,
              borderColor: '#fff',
              borderWidth: 3
            },
            label: {
              padding: [0, -80],
              // alignTo: 'labelLine', // ! 文字对齐方式
              formatter: function(e) {
                const {
                  data: { name, value }
                } = e
                return `{a|${name}}{a|${value}%}\n\n`
              },
              rich: {
                a: { fontSize: 14, color: '#000000' }
              }
            },
            data: this.mapData
            // data: this.tableData
          }
        ]

      })
    }
  }
}
</script>

<style lang="less" scoped>
.emergency_box{
  width: 100%;
  height: calc(100% - 50px);
}
  .emergency_top{
    display: flex;
    justify-content: space-between;
    .emergency_title{
      font-size: 20px;
      line-height: 34px;
      font-weight: bold;
      letter-spacing: -0.21px;
      color: #333333;
      padding-top: 16px;
      padding-left: 20px;
    }
    .emergency_month{
      display: flex;
      font-size: 18px;
      font-weight: normal;
      line-height: 25px;
      letter-spacing: -0.16px;
      color: #999999;
      padding-top: 22px;
      padding-right: 20px;
      cursor: pointer;
      .emergency_ThisMarch1{
        font-size: 18px;
        font-weight: normal;
        line-height: 25px;
        letter-spacing: -0.16px;
        color: #387BFC;
        padding-right: 30px;
      }
      .emergency_ThisMarch2{
        font-size: 18px;
        font-weight: normal;
        line-height: 25px;
        letter-spacing: -0.16px;
        color: #387BFC;
      }
      .emergency_March{
        padding-right: 30px;
      }
      .emergency_LastMarch{
        padding-right: 30px;
      }
    }
  }

.echarts_container{
  width: 100%;
  height: 100%;
}
</style>

